<template>
	<view class="container">
		<!-- 青城头条 -->
		<view class="news-image">
			<image
				src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E5%89%8D%E5%BE%80%E7%A5%88%E7%A6%8F/%E9%9D%92%E5%9F%8E%E5%A4%B4%E6%9D%A1.png"
				class="image-style"></image>
		</view>

		<!-- 祈福分类 -->
		<view class="category">
			<view class="category-item">
				<image
					src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E5%89%8D%E5%BE%80%E7%A5%88%E7%A6%8F/%E5%AD%A6%E4%B8%9A.png"
					class="category-image"></image>
				<text class="category-text">学业</text>
			</view>
			<view class="category-item">
				<image
					src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E5%89%8D%E5%BE%80%E7%A5%88%E7%A6%8F/%E4%BA%8B%E4%B8%9A.png"
					class="category-image"></image>
				<text class="category-text">事业</text>
			</view>
			<view class="category-item">
				<image
					src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E5%89%8D%E5%BE%80%E7%A5%88%E7%A6%8F/%E5%81%A5%E5%BA%B7.png"
					class="category-image"></image>
				<text class="category-text">健康</text>
			</view>
			<navigator url="/pages/drawlotsbefore/drawlotsbefore" class="category-item">
				<image
					src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E5%89%8D%E5%BE%80%E7%A5%88%E7%A6%8F/%E4%BA%B2%E6%83%85.png"
					class="category-image"></image>
				<text class="category-text">情亲</text>
			</navigator>
		</view>

		<!-- 大家都在说 -->
		<text class="comments-title">大家都在说</text>
		<view class="wish">
			<view class="wish-header">
				<image
					src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E7%A5%88%E7%A6%8F/%E5%89%8D%E5%BE%80%E7%A5%88%E7%A6%8F/11.png"
					class="tx"></image>
				<text class="wish-title">祈愿之心</text>
			</view>
			<view class="wish-item">
				<!-- <text class="wish-user">关注</text> -->
				<text class="wish-content" space="pre-wrap">2024/07/26 \n 天尊在上，弟子诚心祈求。望事业顺遂，财运亨通，机遇常伴，功成名就。</text>
			</view>
			<view class="comment-container">
				<view class="comment-actions1">
					<text class="comment-actions1-text">#事业</text>
					<text class="comment-actions1-text">#财运</text>
					<text class="comment-actions1-text">#财神到啦</text>
				</view>
				<view class="comment-actions2">
					<text class="action">分享</text>
					<text class="action">点赞</text>
					<text class="action">评论</text>
				</view>
			</view>
		</view>

		<!-- 祈愿之心 -->
		<view class="wish">
			<view class="wish-header">
				<image
					src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E6%B6%88%E6%81%AF/%E5%B9%B3%E5%AE%89%E5%96%9C%E4%B9%90.png"
					class="tx"></image>
				<text class="wish-title">花开富贵</text>
			</view>
			<view class="wish-item">
				<!-- <text class="wish-user">关注</text> -->
				<text class="wish-content" space="pre-wrap">2024/07/26
					上仙庇佑，信众一心祈请。盼事业之路，繁花铺就，步步生香；财运之途，金银满盈，岁岁有余。机遇频临，助就辉煌功业，成就斐然声名。</text>
			</view>
			<view class="comment-container">
				<view class="comment-actions1">
					<text class="comment-actions1-text">#事业</text>
					<text class="comment-actions1-text">#财运</text>
					<text class="comment-actions1-text">#财神到啦</text>
				</view>
				<view class="comment-actions2">
					<text class="action">分享</text>
					<text class="action">点赞</text>
					<text class="action">评论</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
		background-color: #f5f5f5;
		min-height: 100vh;
		background: linear-gradient(to bottom, #ffb5ce, #fff);
		/* 渐变背景 */
	}

	.news-image {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		margin-top: 10rpx;
		/* 距离顶部的间距 */
	}

	.image-style {
		width: 700px;
		/* 图片宽度 */
		height: 60px;
		/* 图片高度 */
		background-color: #ffffff;
		/* 背景颜色，防止图片加载时显示空白 */
	}

	.category {
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		justify-content: space-between;
		/* 两端对齐 */
		padding: 20rpx;
	}

	.category-item {
		width: 48%;
		/* 每个框框占据一半宽度 */
		text-align: center;
		/* 文字居中 */
		margin-bottom: 20rpx;
		/* 每行之间的间距 */
		background-color: #ffffff;
		/* 背景颜色 */
		border-radius: 10rpx;
		/* 圆角效果 */
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		overflow: hidden;
		/* 隐藏溢出内容 */
	}

	.category-image {
		width: 100%;
		/* 图片宽度 */
		height: 120px;
		/* 图片高度 */
		object-fit: cover;
		/* 确保图片覆盖整个区域 */
	}

	.category-image1 {
		width: 100%;
		/* 图片宽度 */
		height: 120px;
		/* 图片高度 */
		object-fit: cover;
		/* 确保图片覆盖整个区域 */
	}

	.category-text {
		display: block;
		/* 确保文字独占一行 */
		font-size: 28rpx;
		/* 文字大小 */
		color: #333333;
		/* 文字颜色 */
		padding: 10rpx 10px;
		/* 文字上下间距 */
	}

	.comments-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		// margin-bottom: 30px;
	}

	.wish {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
		margin-top: 10px;
	}

	.tx {
		width: 40px;
		/* 设置图片宽度 */
		height: 40px;
		/* 设置图片高度 */
		border-radius: 50%;
		/* 圆形头像 */
		margin-right: 10px;
		/* 图片和文字之间的间距 */
	}

	.wish-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
	}

	.wish-item {
		margin-bottom: 15px;
	}

	.wish-user {
		font-size: 12px;
		padding: 10px 10px;
		color: #fff;
		border-radius: 20px;
		background-color: #1a955f;
	}

	.wish-content {
		font-size: 14px;
		color: #666;
		margin-top: 5px;
		word-wrap: break-word;
		/* 确保长文本自动换行 */
	}

	.comment-container {
		display: flex;
		/* 使用弹性布局 */
		justify-content: space-between;
		/* 左右对齐 */
		align-items: center;
		/* 垂直居中对齐 */
		margin-top: 10px;
		/* 与上文的间距 */
	}

	.comment-actions1 {
		display: flex;
		/* 使用弹性布局 */
		gap: 8px;
		/* 标签之间的间距 */
	}

	.comment-actions1-text {
		background-color: #1a955f;
		/* 背景颜色 */
		border-radius: 50px;
		/* 圆角 */
		padding: 4px 9px;
		/* 内边距 */
		color: white;
		/* 文字颜色 */
		font-size: 10px;
		/* 字体大小 */
	}

	.comment-actions2 {
		display: flex;
		/* 使用弹性布局 */
		gap: 10px;
		/* 按钮之间的间距 */
	}

	.action {
		font-size: 10px;
		/* 字体大小 */
		color: #1a955f;
		/* 文字颜色 */
	}
</style>
